
import './App.css';
import React, { Component, lazy, Suspense } from "react"
import { Route, Redirect, Switch } from 'react-router-dom'
import Londing from './components/index/Londing';

// import Login from './views/Login';//登录页
// import Regist from "./views/Regist"//注册页
// import Search from "./views/Search"//搜索页
// import Index from './views/Index';//
// import NotFound from './views/Notfound';//404页

var Login = lazy(() => import('./views/Login'))
var Regist = lazy(() => import('./views/Regist'))
var Search = lazy(() => import('./views/Search'))
var Index = lazy(() => import('./views/Index'))
var NotFound = lazy(() => import('./views/NotFound'))
var Details = lazy(() => import('./views/Details'))
var MyCollection = lazy(() => import('./views/MyCollection'))



class App extends Component {

  render() { //负责组件的渲染( 只要当前组件渲染一次, render方法必定会调用一次 )
    //console.log(this);//他会打印两次，原因是在index.js中有一个严格模式，可以放大错误
    return (
      <div className="App">
        {/* 主页 */}
        {/* <Home></Home> */}

        {/* 分类页 */}
        {/* <Classification></Classification> */}

        {/* 全部商品页 */}
        {/* <AllGoods></AllGoods> */}

        {/* 值得买 */}
        {/* <WorthBuying></WorthBuying> */}

        {/* 登录页 */}
        {/* <Login></Login> */}

        {/* 注册页 */}
        {/* <Regist></Regist> */}

        {/* 搜索页 */}
        {/* <Search></Search> */}

        {/* 定义一级路由规则 */}
        <Suspense fallback={<div><Londing></Londing></div>}>
          <Switch>
            <Route path="/index" component={Index} />
            <Route exact path="/search" component={Search} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/register" component={Regist} />
            <Route exact path="/details" component={Details} />
            <Route exact path="/mycollection" component={MyCollection} />
            <Redirect exact from="/" to="/index" />
            <Route path="*" component={NotFound} />
          </Switch>
        </Suspense>
      </div>
    );
  }
}

export default App;

